<!doctype html>
<title>Promisees &middot; Courtesy of ponyfoo.com</title>
<meta charset='utf-8'>
<link href='dist/demo.css' rel='stylesheet' type='text/css' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<header>
  <h1 class='lh-title-heading'><a class='lh-title ng-perma' href='#'>Promi<span class='tx-small'>sees</span> <span class='lh-tagline'>&mdash; Promise visualization playground for the adventurous</span></a></h1>
  <nav>
    <ul class='ng-list'>
      <li><a class='ng-link ng-perma' href='#'>Basic</a></li>

      <li><a class='ng-link ng-perma' href='#code=var+p+=+fetch("/foo")%0A++.then(res+=>+res.status,+err+=>+console.error(err))%0A++.then(status+=>+status.a.b.c)%0A++.catch(err+=>+console.error(err))%0A%0Ap.then(status+=>+console.log(status))%0A%0A//+nobody+keeps+their+promises+anymore%0Avar+p2+=+p%0A++.then(()+=>+new+Promise(()=>{}))%0A++.then(status+=>+console.log(status))%0A%0Ap2.then(status+=>+console.log(status))%0Ap2.then(status+=>+console.log(status))%0Ap2.then(status+=>+console.log(status))'>Broken</a></li>

      <li><a class='ng-link ng-perma' href='#code=Promise.all(%5B%0A++new+Promise(resolve+%3D%3E+setTimeout(resolve%2C+1500))%2C%0A++new+Promise(resolve+%3D%3E+setTimeout(resolve%2C+900))%2C%0A++new+Promise(resolve+%3D%3E+setTimeout(resolve%2C+2200))%0A%5D)%0A.then(results+%3D%3E+results.length.b.c)%0A.then(c+%3D%3E+console.info(c))%0A.catch(err+%3D%3E+console.error(err))'><code>Promise.all</code></a></li>

      <li><a class='ng-link ng-perma' href='#code=var+p1+%3D+Promise.race(%5B%0A++new+Promise(resolve+%3D%3E+setTimeout(resolve%2C+4000))%2C%0A++new+Promise((resolve%2C+reject)+%3D%3E+setTimeout(reject%2C+8000))%0A%5D)%0A%0Avar+p2+%3D+Promise.race(%5B%0A++p1%2C%0A++new+Promise(resolve+%3D%3E+setTimeout(resolve%2C+6000))%2C%0A++new+Promise(resolve+%3D%3E+setTimeout(resolve%2C+10000))%2C%0A++new+Promise((resolve%2C+reject)+%3D%3E+setTimeout(reject%2C+2000))%0A%5D)%0A%0Ap2.then(result+%3D%3E+console.log(result))%0Ap2.catch(err+%3D%3E+console.error(err))'><code>Promise.race</code></a></li>

      <li><a class='ng-link ng-perma' href='#code=function+later+()+%7B%0A++return+new+Promise((resolve%2C+reject)+%3D%3E+%7B%0A++++setTimeout(()+%3D%3E+resolve(%22yay%22)%2C+1500)%0A++%7D)%0A%7D%0A%0Afunction+muchLater+()+%7B%0A++return+later().then(later)%0A%7D%0A%0Avar+p+%3D+later()%0A%0Ap%0A++.then(x+%3D%3E+x.y.z)%0A++.catch(err+%3D%3E+console.error(err))%0A++.then(muchLater)%0A++.then(x+%3D%3E+console.log(x))%0A++.then(x+%3D%3E+console.log(x))%0A%0Avar+p2+%3D+p.then(later)%0Ap2.then(x+%3D%3E+console.log(x))%0Ap2.then(x+%3D%3E+x.y.z)%0A++.catch(err+%3D%3E+console.error(err))%0A++.then(x+%3D%3E+fetch("http%3A%2F%2Fgoogle.com"))'>Complex</a></li>

      <li><button class='ng-link ng-save'>Permalink to your code block?</button></li>
      <li><input id='babelify' class='ng-babelify' type='checkbox' title='Compile ES6 code down to ES5' checked/><label class='ng-babelify-label' for='babelify' title='Compile ES6 code down to ES5'>Babelify</label></li>
      <li><a class='ng-link' href='https://github.com/bevacqua/promisees', target='_blank'>GitHub</a></li>
      <li><a class='ng-link' href='https://twitter.com/nzgb', target='_blank'>Twitter</a></li>
      <li><a class='ng-link' href='http://ponyfoo.com', target='_blank'>ponyfoo.com</a></li>
      <li><a class='ng-link ng-first' title='Go to first event'><i class='fa fa-fast-backward'></i></a></li>
      <li><a class='ng-link ng-prev' title='Go to previous event'><i class='fa fa-backward'></i></a></li>
      <li><a class='ng-link ng-replay' title='Repeat animation'><i class='fa fa-repeat'></i></a></li>
      <li><a class='ng-link ng-next' title='Go to next event'><i class='fa fa-forward'></i></a></li>
      <li><a class='ng-link ng-last' title='Go to last event'><i class='fa fa-fast-forward'></i></a></li>
      <li><a class='ng-link ng-x' title='Playback speed'>1x</a></li>
      <li><a class='ng-link ng-recorder ng-recorder-off' target='_blank' title='Turn this on to record the animation as a gif'><i class='fa fa-video-camera'></i></a></li>
      <li><a class='ng-link ng-download ng-recorder-off' target='_blank' title='Click here to download the animation'><i class='fa fa-battery-empty'></i></a></li>
    </ul>
  </nav>
</header>
<img class='gif-frame' style='position: absolute;left: 20px;top: 120px;' />
<main class='ly-main'><article class='ly-container'><section class='ly-input'></section><section class='ly-output'></section></article></main>
<script src='dist/demo.min.js'></script>
<footer class='lf-footer'>Promi<span class='tx-small'>sees</span> is on <a href='https://github.com/bevacqua/promisees' target='_blank'>GitHub</a> &middot; Courtesy of <a href='http://ponyfoo.com', target='_blank'>ponyfoo.com</a></footer>
